<template>
	<view class="progress">
		<view class="progress-status">
		  <view class="progress-inner" :style="{ width: `${loadingWidth}%` }">
			<view class="progress-mask"></view>
		  </view>
		</view>
		<view class="progress-text">
		  {{ '页面加载中...' }}
		</view>
	</view>
</template>

<script>
	export default {
		name:"progress",
		props:{
			progress:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				loadingWidth:0,
			};
		},
		watch(){
		}
	}
</script>

<style lang="scss">
.progress {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 100%;
  height: 100rpx;
  &-status {
    position: absolute;
    bottom: 10rpx;
    left: 0;
    width: 80%;
    height: 16rpx;
    border-radius: rgba(0,0,0,0.5);
    background-color: rgba(0,0,0,0.5);
    border-radius: 20rpx;
  }
 
  &-inner {
    display: block;
    width: 0;
    height: 100%;
    transition: left 1s linear;
  }
// process 动效 loading 2s 结束 可更改
  &-mask {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(to right, #00e0b5, #00c2c6);
    animation: process 2s linear forwards;
  }
  &-text {
    position: absolute;
    left: 140px;
    top: 330px;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    color: #3d3d3d;
  }
}
 
@keyframes process {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
</style>